<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>nCov-全国分布图</title>
    <script th:src="@{/echarts/echarts.js}"></script>
    <script th:src="@{/jquery/jquery-3.5.1.js}"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px"></div>
<script th:inline="javascript">
    // 将图表实例化和容器关联
    var myChart = echarts.init(document.querySelector('#container'));
    // 配置图表数据信息
    var option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['累计确诊', '累计死亡', '累计治愈']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '累计确诊',
                type: 'line',
                stack: '总量1',
                data: []
            },{
                name: '累计死亡',
                type: 'line',
                stack: '总量2',
                data: []
            },{
                name: '累计治愈',
                type: 'line',
                stack: '总量3',
                data: []
            }
        ]
    };
    myChart.setOption(option);
    function stringToDate (dateStr,separator){
        if (!separator){
            separator= "-" ;
        }
        var  dateArr = dateStr.split(separator);
        var  year = parseInt(dateArr[0]);
        var  month;
        if (dateArr[1].indexOf( "0" ) == 0){
            month = parseInt(dateArr[1].substring(1));
        } else {
            month = parseInt(dateArr[1]);
        }
        var  day = parseInt(dateArr[2]);
        var date = year + "/" + month + "/" + day;
        return  date;
    };
    var fillToChart = function (epidemics) {
        var date = [];
        var data = [];
        var data1= [];
        var data2= [];
        var data3= [];
        var temp = null;
        $.each(epidemics, function (index, epidemic) {
            temp=stringToDate(epidemic.date);
            date.push(temp);
            data1.push(epidemic.affirmed);
            data2.push(epidemic.dead);
            data3.push(epidemic.cured);
        });
        data.push(data1);
        data.push(data2);
        data.push(data3);
        myChart.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: data[0]
            },{
                data: data[1]
            },{
                data: data[2]
            }
            ]
        });
    };
    //发送请求获取最新疫情数据
    $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/dataForChart", {}, function (resp) {
        if (resp.code < 0) {
            alert(resp.msg);
        } else {
            fillToChart(resp.data);
        }
    }, "json");
</script>
</body>
</html>